<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片高清处理工具 - Apollo Admin</title>
    
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="/back/css/reset.css" type="text/css" media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="/back/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/back/css/invalid.css" type="text/css" media="screen" />
    
    <!-- jQuery -->
    <script type="text/javascript" src="/back/scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/back/scripts/simpla.jquery.configuration.js"></script>
    
    <!-- 引入ajax -->
    <script type="text/javascript" src="/commons/js/myajax.js"></script>
    
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .tool-section {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 30px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .section-title {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
        }
        
        .input-group {
            margin: 15px 0;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        
        .input-group input, .input-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .btn-group {
            text-align: center;
            margin: 20px 0;
        }
        
        .btn {
            padding: 12px 25px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #4CAF50;
            color: white;
        }
        
        .btn-primary:hover {
            background: #45a049;
        }
        
        .btn-secondary {
            background: #2196F3;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #1976D2;
        }
        
        .btn-download {
            background: #FF9800;
            color: white;
        }
        
        .btn-download:hover {
            background: #F57C00;
        }
        
        .result-section {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 6px;
        }
        
        .image-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        
        .image-container {
            text-align: center;
            padding: 15px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
        }
        
        .image-container h4 {
            margin: 0 0 15px 0;
            color: #333;
        }
        
        .image-container img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        
        .image-info {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
        }
        
        .progress-container {
            margin: 20px 0;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(45deg, #4CAF50, #45a049);
            width: 0%;
            transition: width 0.3s ease;
            position: relative;
        }
        
        .progress-text {
            text-align: center;
            margin-top: 5px;
            font-size: 14px;
            color: #555;
        }
        
        .status-message {
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
        
        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .preset-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin: 15px 0;
        }
        
        .preset-btn {
            padding: 8px 12px;
            background: #e9ecef;
            border: 1px solid #ced4da;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .preset-btn:hover {
            background: #4CAF50;
            color: white;
        }
        
        @media (max-width: 768px) {
            .image-comparison {
                grid-template-columns: 1fr;
            }
            
            .preset-buttons {
                grid-template-columns: 1fr;
            }
        }
    </style>
    
    <script th:inline="javascript">
        $(function () {
            // 预填充您提供的图片链接
            $('#image-url').val('http://43.139.67.16/api/file/get?filename=0430adfae6ea4890ad41d6dfcb7d22c3');
        });
        
        // 下载并处理图片
        function downloadAndProcess() {
            const imageUrl = $('#image-url').val().trim();
            if (!imageUrl) {
                showStatus('请输入图片链接', 'error');
                return;
            }
            
            const width = parseInt($('#target-width').val()) || 1920;
            const height = parseInt($('#target-height').val()) || 1080;
            const quality = parseFloat($('#quality').val()) || 0.95;
            
            showProgress(10);
            showStatus('正在下载图片...', 'info');
            
            // 首先下载图片到服务器
            myajax({
                url: '/backs/api/image/download-and-process',
                type: 'POST',
                data: {
                    imageUrl: imageUrl,
                    width: width,
                    height: height,
                    quality: quality
                },
                success: function(data) {
                    showProgress(100);
                    showStatus('图片处理成功！', 'success');
                    displayResults(data);
                },
                error: function(xhr, status, error) {
                    showProgress(0);
                    showStatus('处理失败: ' + error, 'error');
                }
            });
        }
        
        // 仅下载图片
        function downloadOnly() {
            const imageUrl = $('#image-url').val().trim();
            if (!imageUrl) {
                showStatus('请输入图片链接', 'error');
                return;
            }
            
            showProgress(10);
            showStatus('正在下载图片...', 'info');
            
            myajax({
                url: '/backs/api/image/download',
                type: 'POST',
                data: { imageUrl: imageUrl },
                success: function(data) {
                    showProgress(100);
                    showStatus('图片下载成功！文件名: ' + data, 'success');
                    // 显示下载的图片
                    displayDownloadedImage(data);
                },
                error: function(xhr, status, error) {
                    showProgress(0);
                    showStatus('下载失败: ' + error, 'error');
                }
            });
        }
        
        // 显示处理结果
        function displayResults(result) {
            const resultHtml = 
                '<div class="image-comparison">' +
                    '<div class="image-container">' +
                        '<h4>原图</h4>' +
                        '<img src="/api/file/get?filename=' + result.originalFilename + '" alt="原图">' +
                        '<div class="image-info">' +
                            '文件名: ' + result.originalFilename + '<br>' +
                            '尺寸: ' + result.originalWidth + ' x ' + result.originalHeight + '<br>' +
                            '大小: ' + formatFileSize(result.originalSize) +
                        '</div>' +
                    '</div>' +
                    '<div class="image-container">' +
                        '<h4>处理后</h4>' +
                        '<img src="/api/file/get?filename=' + result.processedFilename + '" alt="处理后">' +
                        '<div class="image-info">' +
                            '文件名: ' + result.processedFilename + '<br>' +
                            '尺寸: ' + result.processedWidth + ' x ' + result.processedHeight + '<br>' +
                            '大小: ' + formatFileSize(result.processedSize) +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="btn-group">' +
                    '<button class="btn btn-download" onclick="downloadProcessedImage(\'' + result.processedFilename + '\')">' +
                        '下载高清图片' +
                    '</button>' +
                    '<button class="btn btn-secondary" onclick="copyImageUrl(\'' + result.processedFilename + '\')">' +
                        '复制图片链接' +
                    '</button>' +
                '</div>';
            
            $('#result-container').html(resultHtml).show();
        }
        
        // 显示下载的图片
        function displayDownloadedImage(filename) {
            // 获取图片信息
            myajax({
                url: '/api/file/info',
                data: { filename: filename },
                success: function(imageInfo) {
                    const resultHtml = 
                        '<div class="image-container" style="max-width: 500px; margin: 0 auto;">' +
                            '<h4>下载的图片</h4>' +
                            '<img src="/api/file/get?filename=' + filename + '" alt="下载的图片">' +
                            '<div class="image-info">' +
                                '文件名: ' + filename + '<br>' +
                                '尺寸: ' + imageInfo.width + ' x ' + imageInfo.height + '<br>' +
                                '大小: ' + formatFileSize(imageInfo.fileSize) +
                            '</div>' +
                            '<div class="btn-group" style="margin-top: 15px;">' +
                                '<button class="btn btn-primary" onclick="processExistingImage(\'' + filename + '\')">' +
                                    '处理为高清' +
                                '</button>' +
                                '<button class="btn btn-secondary" onclick="copyImageUrl(\'' + filename + '\')">' +
                                    '复制链接' +
                                '</button>' +
                            '</div>' +
                        '</div>';
                    
                    $('#result-container').html(resultHtml).show();
                }
            });
        }
        
        // 处理已存在的图片
        function processExistingImage(filename) {
            const width = parseInt($('#target-width').val()) || 1920;
            const height = parseInt($('#target-height').val()) || 1080;
            const quality = parseFloat($('#quality').val()) || 0.95;
            
            showProgress(10);
            showStatus('正在处理图片...', 'info');
            
            myajax({
                url: '/api/file/resize',
                type: 'POST',
                data: {
                    filename: filename,
                    width: width,
                    height: height,
                    quality: quality
                },
                success: function(processedFilename) {
                    showProgress(100);
                    showStatus('图片处理成功！', 'success');
                    
                    // 获取处理后的图片信息并显示
                    myajax({
                        url: '/api/file/info',
                        data: { filename: processedFilename },
                        success: function(processedInfo) {
                            myajax({
                                url: '/api/file/info',
                                data: { filename: filename },
                                success: function(originalInfo) {
                                    const result = {
                                        originalFilename: filename,
                                        originalWidth: originalInfo.width,
                                        originalHeight: originalInfo.height,
                                        originalSize: originalInfo.fileSize,
                                        processedFilename: processedFilename,
                                        processedWidth: processedInfo.width,
                                        processedHeight: processedInfo.height,
                                        processedSize: processedInfo.fileSize
                                    };
                                    displayResults(result);
                                }
                            });
                        }
                    });
                },
                error: function(xhr, status, error) {
                    showProgress(0);
                    showStatus('处理失败: ' + error, 'error');
                }
            });
        }
        
        // 下载处理后的图片
        function downloadProcessedImage(filename) {
            window.open('/api/file/get?filename=' + filename, '_blank');
        }
        
        // 复制图片链接
        function copyImageUrl(filename) {
            const url = window.location.origin + '/api/file/get?filename=' + filename;
            if (navigator.clipboard) {
                navigator.clipboard.writeText(url).then(function() {
                    showStatus('链接已复制到剪贴板: ' + url, 'success');
                }).catch(function() {
                    showStatus('复制失败，请手动复制: ' + url, 'error');
                });
            } else {
                showStatus('复制失败，请手动复制: ' + url, 'error');
            }
        }
        
        // 显示状态信息
        function showStatus(message, type) {
            type = type || 'info';
            const statusDiv = $('#status-message');
            statusDiv.removeClass('status-success status-error status-info')
                     .addClass('status-' + type)
                     .text(message)
                     .show();
            
            if (type === 'success' || type === 'error') {
                setTimeout(function() {
                    statusDiv.hide();
                }, 8000);
            }
        }
        
        // 显示进度
        function showProgress(percent) {
            $('#progress-fill').css('width', percent + '%');
            $('#progress-text').text(percent + '%');
            
            if (percent === 0) {
                $('#progress-container').hide();
            } else {
                $('#progress-container').show();
            }
            
            if (percent === 100) {
                setTimeout(function() {
                    $('#progress-container').hide();
                }, 3000);
            }
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 选择预设尺寸
        function selectPreset(width, height, name) {
            $('#target-width').val(width);
            $('#target-height').val(height);
            showStatus('已选择预设: ' + name, 'info');
        }
        
        // 清除结果
        function clearResults() {
            $('#result-container').hide().empty();
            showProgress(0);
            $('#status-message').hide();
        }
    </script>
</head>
<body>
<div class="container">
    <h1 style="text-align: center; color: #333; margin-bottom: 30px;">图片高清处理工具</h1>
    
    <!-- 状态消息 -->
    <div id="status-message" class="status-message" style="display: none;"></div>
    
    <!-- 进度条 -->
    <div id="progress-container" class="progress-container" style="display: none;">
        <div class="progress-bar">
            <div id="progress-fill" class="progress-fill"></div>
        </div>
        <div id="progress-text" class="progress-text">0%</div>
    </div>
    
    <!-- 输入区域 -->
    <div class="tool-section">
        <div class="section-title">📥 图片链接输入</div>
        
        <div class="input-group">
            <label for="image-url">图片链接:</label>
            <input type="url" id="image-url" placeholder="请输入图片链接，例如: http://43.139.67.16/api/file/get?filename=...">
        </div>
        
        <div class="btn-group">
            <button class="btn btn-secondary" onclick="downloadOnly()">仅下载图片</button>
            <button class="btn btn-primary" onclick="downloadAndProcess()">下载并处理为高清</button>
            <button class="btn" onclick="clearResults()" style="background: #6c757d; color: white;">清除结果</button>
        </div>
    </div>
    
    <!-- 处理选项 -->
    <div class="tool-section">
        <div class="section-title">⚙️ 处理选项</div>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
            <div class="input-group">
                <label for="target-width">目标宽度 (px):</label>
                <input type="number" id="target-width" value="1920" min="1" max="10000">
            </div>
            
            <div class="input-group">
                <label for="target-height">目标高度 (px):</label>
                <input type="number" id="target-height" value="1080" min="1" max="10000">
            </div>
            
            <div class="input-group">
                <label for="quality">图片质量 (0.1-1.0):</label>
                <input type="range" id="quality" min="0.1" max="1.0" step="0.05" value="0.95" 
                       oninput="$('#quality-value').text(this.value)">
                <div style="text-align: center; margin-top: 5px;">质量: <span id="quality-value">0.95</span></div>
            </div>
        </div>
        
        <div style="margin-top: 20px;">
            <label style="margin-bottom: 10px; display: block;">📏 预设尺寸:</label>
            <div class="preset-buttons">
                <div class="preset-btn" onclick="selectPreset(800, 600, '800x600 标准')">
                    800×600<br><small>标准</small>
                </div>
                <div class="preset-btn" onclick="selectPreset(1280, 720, '1280x720 HD')">
                    1280×720<br><small>HD</small>
                </div>
                <div class="preset-btn" onclick="selectPreset(1920, 1080, '1920x1080 Full HD')">
                    1920×1080<br><small>Full HD</small>
                </div>
                <div class="preset-btn" onclick="selectPreset(2560, 1440, '2560x1440 2K')">
                    2560×1440<br><small>2K</small>
                </div>
                <div class="preset-btn" onclick="selectPreset(3840, 2160, '3840x2160 4K')">
                    3840×2160<br><small>4K</small>
                </div>
                <div class="preset-btn" onclick="selectPreset(1200, 800, '1200x800 自定义')">
                    1200×800<br><small>自定义</small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 结果显示区域 -->
    <div id="result-container" class="tool-section" style="display: none;">
        <div class="section-title">✅ 处理结果</div>
        <!-- 结果将在这里动态显示 -->
    </div>
    
    <!-- 使用说明 -->
    <div class="tool-section">
        <div class="section-title">📖 使用说明</div>
        <div style="line-height: 1.6; color: #555;">
            <ol>
                <li><strong>输入图片链接:</strong> 在上方输入框中粘贴您要处理的图片链接</li>
                <li><strong>选择处理方式:</strong>
                    <ul style="margin: 10px 0;">
                        <li>「仅下载图片」- 将远程图片下载到服务器</li>
                        <li>「下载并处理为高清」- 下载图片并直接处理为指定分辨率</li>
                    </ul>
                </li>
                <li><strong>调整参数:</strong> 可以修改目标尺寸和图片质量，或选择预设尺寸</li>
                <li><strong>查看结果:</strong> 处理完成后可以预览对比效果，并下载高清图片</li>
                <li><strong>复制链接:</strong> 点击「复制图片链接」获取新图片的访问地址</li>
            </ol>
            
            <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 10px; border-radius: 4px; margin-top: 15px;">
                <strong>💡 提示:</strong> 系统会自动保持图片的宽高比，确保处理后的图片不会变形。高质量设置(0.9-1.0)适合重要图片，标准质量(0.7-0.8)适合网页展示。
            </div>
        </div>
    </div>
</div>

</body>
</html>